<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product_dail.css">
    <title>产品详情</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html " class="active">产品</a></li>
                    <li><a href="./programme.html">解决方案</a></li>
                    <li><a href="./customer.html">客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="tag_btn">
       <p class="font_20">联系我们</p>
    </div>
    <div style="padding-top: 100px;"></div>
    <main>
        <div class="banner">
            <img src="./img/u422.png" alt="">
             <div>
                <p class="font_30">智慧交通一体化云平台</p>
                <h3 class="font_33">赋能交通行业新的变革</h3>
                <a class="font_24 font_white" href="#">产品咨询</a>
             </div>
        </div>
        <div class="tab_box">
            <div class="container">
                <ul class="tab_list">
                    
                </ul>
            </div>
        </div>
        <div class="summary">
            <div class="cout">
                <div class="container">
                    
                </div>
            </div>
        </div>
        <div class="advantage">
            <div class="container">
                
            </div>
        </div>
        <div class="function">
            <div class="container">
                
            </div>
        </div>
        <div class="application">
            <div class="container">
                
            </div>
        </div>
        <div class="extension">
          
        </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
    <div id="mask">
        <div class="claerFlex">
            <p class="font_20 font_white">联系我们</p>
            <span id="close">
                <img src="./img/u526.png" alt="">
            </span>
            <div id="count_box" >
                <ul class="count">
                    
                </ul>
            </div>
            <form action="" method="get">
                <dl>
                    <dt class="font_17">您的姓名:</dt>
                    <dd><input type="text"></dd>
                    <dt class="font_17">联系方式:</dt>
                    <dd><input type="text"></dd>
                </dl>
                <dl>
                    <dt class="font_17">涉及产品:</dt>
                    <dd><input type="text" disabled placeholder="XXXXXXXXXXXXXX"></dd>
                </dl>
                <dl>
                    <dt class="font_17">问题描述:</dt>
                    <dd><textarea name="" id="" cols="30" rows="10"></textarea></dd>
                </dl>
                <hr>
                <dl>
                    <dt><button class="font_18">提交问题单</button></dt>
                    <dd><p>提交单据后，我们将在3个工作日内联系您。</p></dd>
                </dl>
            </form>
        </div>
    </div>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onload = ()=>{
        
    let tag_bnt = document.querySelector('.tag_btn');
    let mask = document.querySelector('#mask');
    let close_btn = document.querySelector('#mask #close');
    let count = document.querySelector('#mask #count_box');
    let table = document.querySelector('#mask form');
    let tab_box  = document.querySelector('.tab_box .tab_list');
    let summary_count = document.querySelector('.summary .cout>div');
    let advantage_count = document.querySelector('.advantage>div');
    let funtion_box = document.querySelector('.function>div');
    let application_box = document.querySelector('.application>div');
    let extension_box = document.querySelector('.extension');
    let tab = document.querySelector('.tab_box');
    let head = document.querySelector('header');
    let num;
    let arr=  [];
    // let data = [
    //     {
    //         title:'产品概述',
    //         en:'summary',
    //         msg:[
    //             {
    //                 title:'产品概述',
    //                 count:'这是一段产品概述示例：智慧交通一体化云平台为基础框架，整合结构数据、路网数据、图像视频数据、交通流量数据、水文数据、位置信息数据，打造智能运营监控、智能监测养护两大体系，以轨交线网为轴，集成人流、行车、供电、设备、告警等多维度数据，建设线网、线站集约化多维度数据展示，提供“一网”多级的钻取能力，通过线网图对轨交运行状态以宏观的视角，精准的掌控。通过线网图的钻取能力，精细化管理线站。',
    //                 img:'./img/u429.png'
    //             }
    //         ]
    //     },
    //     {
    //         title:'产品优势',
    //         en:'advantage',
    //         msg:[
    //             {
    //                 title:'灵活部署',
    //                 img:'./img/u433.png',
    //                 count:'这是一段产品优势示例：全面适配各种底层存储计算平台，支持容器化部署，零基础半小时轻松完成全套产品部署。'
    //             },
    //             {
    //                 title:'高安全性',
    //                 img:'./img/u437.png',
    //                 count:'这是一段产品优势示例：平台部署在内网服务器上，抗外部攻击能力强。'
    //             },
    //             {
    //                 title:'算法先进',
    //                 img:'./img/u443.png',
    //                 count:'这是一段产品优势示例：1.5亿+数据样本训练，可通过网络升级算法，有效识别率达99.99%以上。'
    //             },
    //             {
    //                 title:'高稳定性',
    //                 img:'./img/u447.png',
    //                 count:'这是一段产品优势示例：7*24小时稳定运行，稳定性高达99.99%。'
    //             }
    //         ]
    //     },
    //     {
    //         title:'产品功能',
    //         en:'function',
    //         msg:[
    //             {
    //                 title:'高速公路实时动态监测',
    //                 img:'./img/u474.png',
    //                 count:'这是一段产品功能示例：实时监测高速公路路况动态，准确了解事件发生地，事件等级，以有效采取下一步处理措施。'
    //             },
    //             {
    //                 title:'高速公路实时动态监测',
    //                 img:'./img/u474.png',
    //                 count:'这是一段产品功能示例：实时监测高速公路路况动态，准确了解事件发生地，事件等级，以有效采取下一步处理措施。'
    //             },
    //             {
    //                 title:'城市街道物联网管控',
    //                 img:'./img/u477.png',
    //                 count:'这是一段产品功能示例：提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况'
    //             },
    //             {
    //                 title:'城市街道物联网管控',
    //                 img:'./img/u477.png',
    //                 count:'这是一段产品功能示例：提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况'
    //             }
    //         ]
    //     },
    //     {
    //         title:'应用场景',
    //         en:'application',
    //         msg:[
    //             {
    //                 title:'场景1：这是一段应用场景示例',
    //                 img:'./img/u453.png',
    //                 count:'这是一段产品应用场景示例：提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警',
    //                 count2:'车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况',
    //             },
    //             {
    //                 title:'场景2：这是一段应用场景示例',
    //                 img:'./img/u454.png',
    //                 count:'这是一段产品应用场景示例：提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警',
    //                 count2:'车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况',
    //             },
    //             {
    //                 title:'场景3：这是一段应用场景示例',
    //                 img:'./img/u459.png',
    //                 count:'这是一段产品应用场景示例：提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警',
    //                 count2:'车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况。提供路况环境、温度、湿度数据，道路结冰等气候预警；车流量情况的实时监控、可调取路桥隧监控、隧道运营情况监控、桥梁情况',
    //             }

    //         ]
    //     },
    //     {
    //         title:'推广案列',
    //         en:'extension',
    //         msg:[
    //             {
    //                 title:'这是一段推广案例标题',
    //                 p:'案例背景',
    //                 count:'这是一段产品推广案例示例：案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍案例背景介绍。',
    //                 p2:'案例成果',
    //                 count2:'这是一段产品推广案例示例：案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果案例成果。',
    //                 img:'./img/u490.png',
    //             }
    //         ]
    //     }
    // ];
    get({
        type:'GET',
        url:'/v1/product/dail',
        success:function(res){
            if(res.code === 200){
                console.log(res);
                reset(res.data)
            }
        }
    });
    let data2 = [
        {
            title:'咨询服务',
            msg:[
                {
                    img:'./img/u537.png',
                    title:'产品咨询',
                    src:'./consult.html'
                },
                {
                    img:'./img/u540.png',
                    title:'售前客服咨询',
                    src:'./service.html'
                },
            ]
        },
        {
            title:'售后服务',
            msg:[
                {
                    img:'./img/u546.png',
                    title:'问题单填报'
                },
                {
                    img:'./img/u540.png',
                    title:'售后客服咨询',
                    src:'./service.html',
                }
            ]
        },
        {
            title:'联系方式',
            msg:[
                {
                    img:'./img/u548.png',
                    text:'XXX-XXXXXXXXX'
                },
                {
                    img:'./img/u550.png',
                    text:'XXXXXX@XXX.com',
                }
            ]
        }
    ]
    function reset(data){
        data.forEach((v,i)=>{
        let {
            title,
            en,
            msg
        }=v;
        if(i===0){
            tab_box.innerHTML+=`
            <li class="font_24 active" data-i='${en}'>${title}</li>
        `
        }else{
            tab_box.innerHTML+=`
            <li class="font_24 " data-i='${en}'>${title}</li>
        `
        }
        arr.push(en);
        switch (en) {
            case "summary":
            creatSummary(v)
                break;
            case 'advantage':
            creatAdvantage(v)
                break;
            case 'function':
            creatFunction(v)
                break;
            case 'application':
            creatApplication(v);
                break;
            case 'extension':
            creatExtension(v);
                break;            
            default:
                break;
        }
       
      
    })
    let ul_box = count.firstElementChild;
    data2.forEach((v,i)=>{
        let {title,msg} = v;
        if(i+1 === data2.length){
            ul_box.innerHTML +=`
            <li>
                        <p class="font_20 font_bold">${title}</p>
                    </li>
            `
            msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
            <div>
                            <img src="${item.img}" alt="">
                            <p class="font_17">${item.text}</p>
                        </div>
        `
        })
        }else{
            ul_box.innerHTML += `
        <li>
                        <p class="font_20 font_bold">${title}</p>
                        
                    </li>
        `
        msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
        <a ${item.src?"href="+item.src :''}>
                            <img src="${item.img}" alt="">
                            <p class="font_20">${item.title}</p>
                        </a>
        `
        })
        }
    })
    
    let btns = document.querySelectorAll('#mask .count li a');
    tag_bnt.addEventListener('click',()=>{
        mask.style.display = 'block';
    })
    close_btn.addEventListener('click',()=>{
        mask.style.display = 'none';
        count.style.display = 'block';
        table.style.display = 'none'
    })
    mask.addEventListener('click',(e)=>{
        if(e.target.id !== 'mask') return;
        mask.style.display = 'none';
        count.style.display = 'block';
        table.style.display = 'none'
    })
    btns[2].addEventListener('click',()=>{
        count.style.display = 'none';
        table.style.display = 'block'
    })
    function creatSummary(data){
        let {title,en,msg}=data
        msg.forEach(v=>{
            summary_count.innerHTML+=`
        <h3 class="font_33 ">${v.title}</h3>
                    <p class="font_24 font_black">${v.count}</p>
                    <img src="${v.img}">
        `
        })
    }
    function creatAdvantage(data){
        let {title,en,msg}=data;
        advantage_count.innerHTML +=`<p class="font_33 ">${title}</p>
            <ul></ul>
        `
        let ul = advantage_count.lastElementChild;
        msg.forEach(v=>{
            ul.innerHTML += `
                <li>
                        <img src="${v.img}" alt="">
                        <p class="font_33">${v.title}</p>
                        <p class="font_20 font_black">${v.count}</p>
                    </li>
            `
        })
    }
    function creatFunction(data){
        let{title,en,msg} = data;
        funtion_box.innerHTML +=`<p class="font_33 ">${title}</p>
            <ul></ul>
        `
        let ul = funtion_box.lastElementChild;
        msg.forEach(v=>{
            ul.innerHTML +=`
            <li>
                        <img src="${v.img}" alt="">
                        <div>
                            <p class="font_30">${v.title}</p>
                        <p class="font_24 font_black">${v.count}</p>
                        </div>
                    </li>
            `
        })
    }
    function creatApplication(data){
        let {title,en,msg} = data;
        application_box.innerHTML +=`
        <p class="font_33">${title}</p>
                <div class="banner_box">
                    <div class="slides">
                    </div>
                    <div class="btns">
                        <img class="prev" src="./img/u487.png" alt="">
                        <img class="nexit" src="./img/u487.png" alt="">
                    </div>
                    <ul>
                       
                    </ul>
                </div>
        `
        let slides = application_box.lastElementChild.firstElementChild;
        let ul = application_box.lastElementChild.lastElementChild;
        num=msg.length;
        msg.forEach((v,i)=>{
            slides.innerHTML +=`
            <div>
                            <img src="${v.img}" alt="">
                            <div class="count">
                                <p class="font_33">${v.title}</p>
                                <p class="font_20 font_black">${v.count}</p>
                                <p class="font_20 font_black">${v.count2}</p>
                            </div>
                        </div>
            `
            if(i==0){
                ul.innerHTML += `<li class='active'></li>`
            }else{
                ul.innerHTML += `<li ></li>`
            }
        })
    }
    function creatExtension(data){
        let {title,en,msg} = data;
        extension_box.innerHTML += `
            <p class="font_33">${title}</p>
            <div class='container'></div>
        `
        // extension_box.innerHTML= `
        // <p class="font_33>${title}</p>
        //     <div class='container'></div>
        // `
        let box = extension_box.lastElementChild;
        msg.forEach(v=>{
            box.innerHTML +=`
            <img src="${v.img}" alt="">
                <div class="count">
                    <p class="font_30">${v.title}</p>
                    <h3 class="font_30 font_bold">${v.p}</h3>
                    <p class="font_24 font_black">
                        ${v.count}
                    </p>
                    <h3 class="font_30 font_bold">${v.p2}</h3>
                    <p class="font_24 font_black">${v.count2}</p>
                </div>
            `
        })

    }
  
    let points = document.querySelectorAll('.application ul li');
    let slides = document.querySelector('.application .slides');
    let btn_next = document.querySelector('.application .nexit');
    let btn_prev = document.querySelector('.application .prev');
    let tab_list = document.querySelectorAll('.tab_box .tab_list li');
    tab_list.forEach((v,i)=>{
        v.addEventListener('click',(e)=>{
            tab_list.forEach(v=>v.classList.remove('active'));
            v.classList.add('active')
            let t = document.querySelector(`.${e.target.dataset.i}`).offsetTop-40;
             window.scrollTo({
                top: t-40,
                behavior:'smooth',
            })
        })
    })
    // points.forEach((v,i)=>{
    //     v.addEventListener('mouseover',()=>{
    //         points.forEach(p=>p.classList.remove('active'));
    //         v.classList.add('active');
    //         slides.style.transform = `translateX(-${i}00%)`
    //     })
    // })
    let index = 0;
    btn_next.addEventListener('click',()=>{
        index ++;
        if(index<0 || index ===num)index=0;
        slides.style.transform = `translateX(-${index}00%)`;
        points.forEach(p=>p.classList.remove('active'));
        points[index].classList.add('active')
        
    });
    btn_prev.addEventListener('click',()=>{
        index--;
        if(index<0 || index ===num)index = num-1;
        slides.style.transform = `translateX(-${index}00%)`;
        points.forEach(p=>p.classList.remove('active'));
        points[index].classList.add('active')
    })
    };
    
        window.addEventListener('scroll',()=>{  
            if(window.scrollY >= 746){
                head.style.display = 'none';
                tab.classList.add('fix');
            }else{
                head.style.display = 'block';
                tab.classList.remove('fix');
            }
        })
    }
</script>
</html>